<template>
    <jb-crud-page ref="pageRef" :searchUrl="pageUrl" :conditions-align="'start'"
                  :searchConditions="pageConditions" :editComponent="Edit" @afterSearch="handleAfterSearch"
                  @afterRender="handleAfterRender">
        <template #conditions-form>
            <jb-input v-model:value="pageConditions.keywords" placeholder="请输入名称" clearable/>
        </template>
        <template #default="{list,tableStartIndex}">

            <n-layout has-sider>
                <n-layout>

                    <jb-table
                        ref="tableRef"
                        :row-config="{keyField: 'id', isHover: true}"
                        :radio-config="{ trigger: 'row', checkRowKey: selectRow?.id }"

                        :data="list"
                        :start-index="tableStartIndex"
                        @radio-change="radioChangeEvent"
                    >
<!--                        <jb-column type="checkbox" width="60" fixed="left"></jb-column>-->

                        <vxe-column type="radio" width="60" fixed="left">
                            <template #header>
                                <vxe-button mode="text" @click="clearRadioRowEvent" :disabled="!selectRow">取消</vxe-button>
                            </template>
                        </vxe-column>
                        <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                        <jb-column
                            field="name"
                            title="名称"
                            min-width="160"
                            fixed="left"
                        ></jb-column>
                        <jb-column
                            field="briefInfo"
                            title="简介"
                            min-width="160"
                        ></jb-column>
                        <jb-column
                            field="enable"
                            title="是否启用"
                            min-width="300"
                        >
                            <template #default="{row}">
                                <n-tag v-if="row.enable" type="success">是</n-tag>
                                <n-tag v-else type="error">否</n-tag>
                            </template>
                        </jb-column>
                    </jb-table>
                </n-layout>
                <n-layout-sider
                    bordered
                    collapse-mode="width"
                    :collapsed-width="0"
                    :width="300"
                    show-trigger="arrow-circle"
                    content-style="padding: 16px;"
                >
                    <div class="selected-items-container">
                        <div class="selected-header">
                            <span>已选择项</span>
                        </div>
                        <div class="selected-content">
                            <template v-if="selectRow">
                                <div class="selected-item">
                                    <span class="item-text">{{ selectRow.name }}</span>
                                    <n-button
                                        circle
                                        size="tiny"
                                        type="error"
                                        class="delete-btn"
                                        @click="clearRadioRowEvent"
                                    >
                                        <template #icon>
                                            <n-icon>
                                                <close/>
                                            </n-icon>
                                        </template>
                                    </n-button>
                                </div>
                            </template>
                            <div v-else class="empty-text">
                                暂无选中项
                            </div>
                        </div>
                    </div>
                </n-layout-sider>
            </n-layout>

        </template>
    </jb-crud-page>
</template>

<script setup>
import {useResetableData} from "@/hooks/common/use-resetable-data.js";
import Edit from "./cpns/edit.vue"
import {onMounted, ref} from "vue";
import {Close} from '@vicons/ionicons5'
import {JBoltApi} from "@/service/request/index.js";

const props = defineProps({
    appId: String
})

const pageRef = ref(null)
const pageUrl = ref('')
const pageConditions = useResetableData({
    keywords: '',
    enabled: true
})

const tableRef = ref(null)

const selectRow = ref(null)

// 单选事件处理
function radioChangeEvent({ row }) {
	console.log(row);
    selectRow.value = row
}

function clearRadioRowEvent() {
    const $table = tableRef.value
    if ($table) {
        $table.clearRadioRow()
        selectRow.value = null
    }
}

const resultList = ref([])

function handleAfterSearch(list) {
    resultList.value = list
}

function handleAfterRender(list) {
    const $table = tableRef.value
    if ($table) {
        $table.setRadioRow(selectRow.value)
    }
}

const submit = async (callback) => {
	// console.log(selectRow.value.id);
    if (selectRow.value) {
        await JBoltApi.post('/aiApp/submitKnowledgeBases', {
            appId: props.appId,
            list: [selectRow.value.id]
        })

        if (callback) {
            callback()
        }
        return true
    }
}

defineExpose({
    submit
})

let showTable = ref(false)

function loadSelectedList() {
    JBoltApi.get('/aiApp/getKlbByAppId', {
        appId: props.appId
    }).then(res => {
		console.log(res.result.data);
		if(res.result.data!=null){
			selectRow.value = { name:res.result.data[0].value, id: res.result.data[0].key }
		}
        // if (res.result.data.length > 0) {
        //     selectRow.value = { ...res.result.data[0], id: res.result.data[0].linkId }
        // }
         showTable.value = true
         pageUrl.value = '/aiKnowledgeBase/list'
    })
}

onMounted(() => {
    if (props.appId) {
        loadSelectedList()
    }
})

</script>


<style scoped>
.selected-items-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.selected-header {
    padding: 8px 0;
    font-weight: 500;
    border-bottom: 1px solid var(--n-border-color);
    margin-bottom: 12px;
}

.selected-content {
    flex: 1;
    overflow-y: auto;
}

.selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    background-color: var(--n-card-color);
    transition: all 0.3s;
}

.selected-item:hover {
    background-color: var(--n-table-header-color);
}

.item-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}

.delete-btn {
    opacity: 0.8;
}

.delete-btn:hover {
    opacity: 1;
}

.empty-text {
    text-align: center;
    color: var(--n-text-color-disabled);
    padding: 32px 0;
}
</style>